/* 顶部菜单样式 */

.nav {
  float: left;
  position: relative;
  > ul {
    float: left;
    li {
      float: left;
      font-size: $font18;
      opacity: 0.5;
      line-height: $headerHeight;
      text-align: center;
      @include transition(opacity 300ms ease);
      a {
        padding: 0 30px;
        color: $white;
        position: relative;
        display: inline-block;
        &:after {
          @include transition();
          @include transform(scale(0));
          opacity: 0;
          content: "";
          display: block;
          height: 4px;
          width: 100%;
          background-color: $primary;
          position: absolute;
          left: 0px;
          bottom: 0px;
        }
      }
      &:hover {
        opacity: 1;
      }
    }
    li.active {
      opacity: 1;
      a:after {
        @include transform(scale(1));
        opacity: 1;
      }
    }
  }
  /* 二级菜单样式 */
  .second-nav {
    opacity: 0;
    visibility: hidden;
    @include transform-origin();
    @include transform(scaleY(0));
    @include transition();
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin-left: -220px;
    top: $headerHeight;
    background: $white;
    -webkit-box-shadow: inset 0 -1px 0 0 $shadow;
    box-shadow: inset 0 -1px 0 0 $shadow;
    padding-left: 250px;
    ul {
      li {
        float: left;
        line-height: $secondNavHeight;
        font-size: $font16;
        a {
          display: block;
          padding: 0px 20px;
          color: $base;
          @include transition(color 300ms ease);
        }
        &:hover a,
        &.active a {
          color: $primary;
        }
      }
    }
  }
  .second-nav.show {
    opacity: 1;
    visibility: visible;
    @include transform(scaleY(1));
  }
}

.has-second-nav {
  > div > .main {
    margin-top: $secondNavHeight;
  }
}

.header-fixed.has-second-nav {
  > div > .main {
    margin-top: $headerHeight + $secondNavHeight;
  }
}


/* 侧边菜单 */

body.has-sider-menu > div > .main {
  position: relative;
  z-index: 1;
  margin-right: 0px;
  margin-left: $siderWidth;
  min-width: $minWidth - $siderWidth;
  width: auto;
  @include transition(none);
}

@mixin siderContentPadding($count: 1) {
  @if $count < 4 {
    > .sider-menu-content {
      > .sider-menu-item {
        > a {
          padding: 10px 0px 10px (20px + 10px * $count);
        }
        @include siderContentPadding($count + 1);
      }
    }
  }
}

.sider-menu {
  overflow: hidden;
  z-index: 10;
  width: $siderWidth;
  position: fixed;
  left: 0px;
  padding-bottom: 50px;
  top: $headerHeight;
  bottom: 0px;
  margin: auto;
  background-color: $white;
  -webkit-box-shadow: 0 0 4px 0 rgba($black, 0.05);
  box-shadow: 0 0 4px 0 rgba($black, 0.05);
  overflow: auto;
  .sider-menu-title {
    font-size: $font18;
    padding: 20px 20px;
  }
  .sider-menu-content {
    overflow: hidden;
    @include transition();
    &.hide {
      height: 0 !important;
      opacity: 0 !important;
      display: none\9\0 !important;
    }
  }
  > .sider-menu-content {
    -webkit-box-shadow: inset 0 -1px 0 0 $shadow;
    box-shadow: inset 0 -1px 0 0 $shadow;
    .sider-menu-item {
      a {
        position: relative;
        color: $black;
        display: block;
        font-size: $font14;
        @include transition();
        &.active {
          background-color: $siderBg;
        }
        &.active,
        &:hover {
          color: $primary;
        }
        i.iconfont {
          display: block;
          font-size: $font12;
          position: absolute;
          right: 0px;
          padding-right: 15px;
          padding-left: 5px;
          top: 0px;
          bottom: 0px;
          height: 100%;
          line-height: 50px;
          margin: auto;
        }
        .slide-menu-item {
          a {
            i.iconfont {
              line-height: 40px;
              height: 40px;
            }
          }
        }
        &.arrow {
          padding-right: 30px !important;
        }
      }
    }
    > .sider-menu-item {
      > a {
        -webkit-box-shadow: inset 0 1px 0 0 $shadow;
        box-shadow: inset 0 1px 0 0 $shadow;
        font-size: $font16;
        padding: 15px 0px 15px 20px;
      }
      @include siderContentPadding();
    }
  }
}
